<template>
  <view class="details_box">
    <view class="zfxx ddxx">
      <view class="lis">订单信息</view>
      <view class="lis">
        <view>订单号</view>
        <view>{{ datas.orderId }}</view>
      </view>
      <view class="lis">
        <view>下单时间</view>
        <view>{{ datas.createTime }}</view>
      </view>
      <view class="lis">
        <view>订单状态</view>
        <view v-if="datas.status == 1">已付定金</view>
        <view v-if="datas.status == 2">待核销</view>
        <view v-if="datas.status == 3">已签收</view>
      </view>
    </view>
    <view class="zfxx ddxx">
      <view class="lis">
        <view>客户</view>
        <view>{{ datas.uid }}</view>
      </view>
      <view class="lis" v-if="customer.contactNumber">
        <view>联系电话</view>
        <view>{{ customer.contactNumber }}</view>
      </view>
      <view class="lis" v-if="datas.outboundStatus == 1">
        <view>支付方式</view>
        <view>{{ datas.payType }}</view>
      </view>
      <view class="lis">
        <view>合计</view>
        <view>{{ datas.totalPrice }}元</view>
      </view>
    </view>
    <view class="ddmx">
      <view class="title">订单明细</view>
      <view class="lists">
        <view class="lis">
          <view class="tops">
            <view>{{ datas.productName }}</view>
            <!-- <view>单价：{{ datas.payPrice }}元/{{ datas.size || '斤' }}</view> -->
             <view></view>
          </view>
          <view class="buts">
            <view>数量：{{ datas.totalNum }}{{ datas.size || '斤' }}</view>
            <view>小计：{{ datas.totalPrice }}元</view>
          </view>
        </view>
      </view>
      <view class="ze">
        <view>商品总额</view>
        <view>¥{{ datas.totalPrice }}</view>
      </view>
      <view> 扫码核销 </view>
      <!-- 二维码 -->
      <canvas id="qrcode" v-show="datas.status == 2" canvas-id="qrcode" style="width: 690rpx; height: 690rpx"></canvas>
    </view>
  </view>
</template>

<script>
  import { ddfindById } from '@/utils/api.js';
  import { qrcodeCanvas } from '@/uni_modules/fan-canvas/plugins/utils';

  export default {
    data() {
      return {
        id: '',
        datas: {},
        customer: {},
        lists: [],
      };
    },
    onLoad(e) {
      if (e.id) {
        this.id = e.id;
        this.ddfindById();
      }
    },
    computed: {},
    mounted() {},
    methods: {
      draw() {
        console.log('draw', this.datas.status);

        const _this = this;
        const qrcodectx = uni.createCanvasContext('qrcode');

        qrcodeCanvas(
          'qrcode',
          JSON.stringify({
            orderId: _this.datas.orderId,
          }),
          690,
          690
        );

        qrcodectx.draw(true, function () {
          uni.canvasToTempFilePath(
            {
              width: 690,
              height: 690,
              canvasId: 'qrcode',
            },
            _this
          );
        });
      },
      // 获取订单详情
      ddfindById() {
        uni.showLoading({
          title: '加载中……',
          mask: true,
        });
        ddfindById({
          id: this.id,
        })
          .then((res) => {
            uni.hideLoading();
            if (res.code === 200) {
              // console.log(res.data);
              this.datas = res.data;

              this.draw();
            } else {
              uni.showToast({ title: '请求错误', position: 'bottom', icon: 'none' });
            }
          })
          .catch((err) => {
            uni.hideLoading();
            uni.showToast({ title: '网络繁忙', position: 'bottom', icon: 'none' });
          });
      },
    },
  };
</script>

<style scoped lang="scss">
  .details_box {
    padding: 10px;

    .ddxx {
      padding: 0 10px;
      // height: 200px;
      background: #ffffff;
      border-radius: 10px;
      margin-bottom: 10px;

      .lis {
        height: 50px;
        border-bottom: 1px solid #d8d8d8;
        display: flex;
        align-items: center;
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: #1c9e60;
        line-height: 22px;

        view:nth-child(1) {
          width: 30%;
          color: $mainText;
        }

        view:nth-child(2) {
          width: 70%;
          font-weight: 400;
          color: #999999;
        }
      }

      .lis:last-child {
        border-bottom: none;
      }
    }

    .ddmx {
      background: #ffffff;
      padding: 0 10px;
      border-radius: 10px;
      margin-bottom: 10px;
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      line-height: 22px;

      .title {
        height: 50px;
        color: #1c9e60;
        line-height: 50px;
        border-bottom: 1px solid #d8d8d8;
      }

      .lists {
        .lis {
          height: 100px;
          border-bottom: 1px solid #d8d8d8;

          .tops {
            height: 60px;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            align-items: center;

            view:nth-child(1) {
              font-size: 30rpx;
              line-height: 36px;
            }

            view:nth-child(2) {
              height: 36px;
              font-size: 26rpx;
              color: $text;
              font-weight: 400;
              margin-left: 12px;
              display: flex;
              align-items: flex-end;
            }

            view:nth-child(3) {
              height: 36px;
              font-size: 26rpx;
              color: $text;
              font-weight: 400;
              margin-left: 12px;
              display: flex;
              align-items: flex-end;
            }
          }

          .buts {
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 26rpx;
            font-weight: 400;
            color: $text;
            line-height: 20px;
          }
        }
      }

      .ze {
        height: 50px;
        color: $mainText;
        display: flex;
        align-items: center;
        justify-content: space-between;

        view:nth-child(2) {
          font-weight: 400;
        }
      }
    }

    .zfxx {
      background: #ffffff;
      border-radius: 10px;

      .lis {
        view:nth-child(2) {
          text-align: right;
        }
      }
    }
  }
</style>
